export const baseUsage = `
import {
    PhForm,
    PhFormDatetiemRange,
    PhFormDatetime ,
    PhFormDate, 
    PhFormDivider,
    PhFormYear,
    PhFormMonth,
    PhFormTime
} from 'phoeon'

interface FormDatetime{
    placeholder:{type:String},
    disabled:{type:Boolean,default:false},
    value:{type:String},
    start:{type:String},
    end:{type:String},
    type:{type:String,default:"datetime"},
    format:{type:String,default:"yyyy-MM-dd hh:mm:ss"},
    @change 改变事件
}
//特殊
interface PhFormDatetiemRange{
    disabled:{type:Boolean,default:false},
    type:{type:String,default:"date"},
    format:{type:String},
    placeholderStart:{type:String},
    placeholderEnd:{type:String},
    start:{type:String}, //开始值
    end:{type:String},  //结束值
    min:{type:String,default:""}, //下限值
    max:{type:String,default:""}, //上限值
    customTip:{type:String} //验证错误tip
    @change 改变事件
}
interface FormDate extends FormDatetime{
    format:{type:String,default:"yyyy-MM-dd"}
}
interface FormMonth extends FormDatetime{
    format:{type:String,default:"yyyy-MM"}
}
interface FormYear extends FormDatetime{
    format:{type:String,default:"yyyy"}
}
interface FormTime extends FormDatetime{
    format:{type:String,default:"hh:mm:ss"}
}

//如需脱离form单独使用，如下
import {
    PhDatetime ,
    PhDate, 
    PhYear,
    PhMonth,
    PhTime
} from 'phoeon'
interface Datetime{
    ...同上
    @change 替换@ph-change
}
interface <PhDate｜PhYear｜PhMonth｜PhTime> extends Datetime{
    ...同PhFormXXX
}
`;

export const demo1 = `
<ph-divider>表单datetime {{datetime}}</ph-divider>
<ph-datetime style="width:150px" :value="datetime" @change="onDatetimeChange"/>
<ph-divider>表单date {{date}}</ph-divider>
<ph-date style="width:150px" :value="date" @change="onDateChange"/>
<ph-divider>表单year {{year}}</ph-divider>
<ph-year style="width:150px" :value="year" @change="onYearChange"/>
<ph-divider>表单year-month {{yearmonth}}</ph-divider>
<ph-month style="width:150px" :value="yearmonth" @change="onYearMonthChange"/>
<ph-divider>表单time {{time}}</ph-divider>
<ph-time style="width:150px" :value="time" @change="onTimeChange"/>
<ph-divider>自定义表单time格式 {{time}}</ph-divider>
<ph-time style="width:150px" :value="time1" format="hh时mm分ss秒" @change="onTimeChange1"/>
<ph-divider>表单禁止 {{datetime}}</ph-divider>
<ph-datetime style="width:150px" :value="datetime" :disabled="true" @change="onDatetimeChange"/>
`;

export const demo2 = `
<ph-form>
    <ph-divider>表单datetime {{datetime}}</ph-divider>
    <ph-form-datetime style="width:150px" :value="datetime" @ph-change="onDatetimeChange"/>
    <ph-blockquote type="primary">
        表单datetime 限定范围
        <br/>
        start="1991-09-20 12:03:34" end="1993-09-20 12:03:34"
    </ph-blockquote>
    <ph-form-datetime style="width:150px" start="1991-09-20 12:03:34" end="1993-09-20 12:03:34" :value="datetime" @ph-change="onDatetimeChange"/>
    
    <ph-divider>表单date {{date}}</ph-divider>
    <ph-form-date style="width:150px" :value="date" @ph-change="onDateChange"/>
    <ph-blockquote type="primary">
        date 限定范围
        <br/>
        start="1993-09-5" end="1993-09-23"
    </ph-blockquote>
    <ph-form-date style="width:150px" value="1993-09-10" start="1993-09-8" end="1993-09-23" @ph-change="onDateChange"/>
    
    <ph-divider>表单year {{year}}</ph-divider>
    <ph-form-year style="width:150px" :value="year" @ph-change="onYearChange"/>
    <ph-blockquote type="primary">
        year 限定范围
        <br/>
        start="1991" end="1993"
    </ph-blockquote>
    <ph-form-year style="width:150px" :value="year" start="1991" end="1993" @ph-change="onYearChange"/>

    <ph-divider>表单year-month {{yearmonth}}</ph-divider>
    <ph-form-month style="width:150px" :value="yearmonth" @ph-change="onYearMonthChange"/>
    <ph-blockquote type="primary">
        month 限定范围
        <br/>
        start="1991-06" end="1993-09"
    </ph-blockquote>
    <ph-form-month style="width:150px" :value="yearmonth" start="1991-06" end="1993-09" @ph-change="onYearMonthChange"/>


    <ph-divider>表单time {{time}}</ph-divider>
    <ph-form-time style="width:150px" :value="time" @ph-change="onTimeChange"/>
    <ph-blockquote type="primary">
        time 限定范围
        <br/>
        start="6:30:34" end="18:00:34"
    </ph-blockquote>
    <ph-form-time style="width:150px" :value="time" start="6:30:34" end="18:00:34" @ph-change="onTimeChange"/>

    <ph-divider>自定义表单time格式 {{time}}</ph-divider>
    <ph-form-time style="width:150px" :value="time1" format="hh时mm分ss秒" @ph-change="onTimeChange1"/>
    <ph-blockquote type="primary">
        time 限定范围
        <br/>
        start="6时30分34秒" end="18时00分34秒"
    </ph-blockquote>
    <ph-form-time style="width:150px" :value="time1" start="6时30分34秒" end="18时00分34秒" format="hh时mm分ss秒" @ph-change="onTimeChange1"/>

    <ph-divider>并列日期范围start="6:30:34" end="18:00:34" value:{{time}}</ph-divider>
    <ph-form-datetiem-range :start="time" min="6:30:34" max="18:00:34" type="time"/>

    <ph-divider>表单禁止 {{datetime}}</ph-divider>
    <ph-form-datetime style="width:150px" :value="datetime" :disabled="true" @ph-change="onDatetimeChange"/>
    
    <ph-divider>weekText 自定义周文字 :weekText="['Su','Mo','Tu','We','Th','Fr','Sa']"</ph-divider>
    <ph-form-date label="weekText" 
        style="width:350px"
        :weekText="['Su','Mo','Tu','We','Th','Fr','Sa']"/>
    <ph-divider>importants自定义重要日子 :importants="[{title:'工资',md:'*-20'},{title:'浪',md:'*-9',desc:'去三里屯浪'}]"</ph-divider>
    <ph-form-date label="importants"
        style="width:350px"
        :importants="[{title:'工资',md:'*-20'},{title:'浪',md:'*-9',desc:'去三里屯浪'}]"/>
    <ph-divider>clear 关闭清除按钮</ph-divider>
    <ph-form-date label="clear" style="width:350px" :clear="false" :value="datetime" @ph-change="onDatetimeChange"/>
    <ph-divider>now 关闭现在按钮选项</ph-divider>
    <ph-form-date label="now" style="width:350px" :now="false" :value="datetime" @ph-change="onDatetimeChange"/>

    <ph-blockquote>表单主题色:theme&lt;dark|light|primary|success|danger|warning&gt;></ph-blockquote>
    <ph-form-date label="默认dark" style="width:350px" :value="datetime" @ph-change="onDatetimeChange"/>
    <ph-form-date label="light" theme="light" style="width:350px" :value="datetime" @ph-change="onDatetimeChange"/>
    <ph-form-date label="primary" theme="primary" style="width:350px" :value="datetime" @ph-change="onDatetimeChange"/>
    <ph-form-date label="success" theme="success" style="width:350px" :value="datetime" @ph-change="onDatetimeChange"/>
    <ph-form-date label="danger" theme="danger" style="width:350px" :value="datetime" @ph-change="onDatetimeChange"/>
    <ph-form-date label="warning" theme="warning" style="width:350px" :value="datetime" @ph-change="onDatetimeChange"/>
</ph-form>`;
